<template>
  <div class="container">
    <!-- -------------------相册集合----------------------------- -->
    <div class="content">
      <el-row :gutter="5">
        <el-col :xs="12" :sm="6" :md="6" :lg="4" :xl="3" v-for="album in albumList" :key="album">
          <el-card class="card" :body-style="{ padding: '0px' }" @click="showPhoto(album.name)">
            <el-button class="card-album-num">{{album.num}}</el-button>
            <el-image :src="minioUrl+album.url" class="image" fit="cover">
              <template #error>
                <div class="el-image-error">
                  快添加图片吧
                </div>
              </template>
            </el-image>
            <div style="padding: 10px">
              <span>{{album.name}}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { minioUrl } from "@/base/index";
export default {
  name: "GAlbumDetect",
  data () {
    return {
      albumList: [],
      minioUrl: minioUrl,
    }
  },
  mounted () {
    this.getAlbumList();
  },
  methods: {
    getAlbumList () {
      this.$axios.get("/photodetect/album").then(res => {
        if (res.flag) {
          this.albumList = res.data
        }
      })
    },
    showPhoto (clas) {
      this.$router.push({
        name: 'photodetect', params: { "clas": clas }
      }
      );
    },
  }
}
</script>

<style scoped>
/* 解决getter 超出出现滚动条 */
.content {
  overflow-x: hidden;
  padding: 0 5px;
  box-sizing: border-box;
}
.card {
  position: relative;
  margin-top: 5px;
  padding: 5px;
  text-align: center;
}
.image {
  height: 150px;
  width: 100%;
}
.el-image-error {
  height: 100%;
  line-height: 150px;
  color: gray;
}
.card-album-num {
  position: absolute;
  right: 10px;
  top: 10px;
  font-weight: bold;
}
</style>